import {ModalForm} from "@ant-design/pro-form";
import {Avatar, Descriptions, Menu} from 'antd';
import {MailOutlined, UserOutlined} from '@ant-design/icons';
import {useRef, useState} from 'react';
import ProTable from '@ant-design/pro-table';
import {
	getBalanceUser,
	getConsumption,
	getCouponUser,
	getOrderUserInfo,
	getSignInUser,
	getUserRelationship
} from "@/services/ant-design-pro/order";

const UserInfo = (props) => {
	const {UID, nickname} = props
	const [userInfo, setUserInfo] = useState([])
	const [key1, setKey1] = useState(0)
	const actionRef = useRef()

	// 表格数据
	const columns = [
		[
			{
				title: '订单ID',
				dataIndex: 'id',
				align: 'center',
				width: 80,
			},
			{
				title: '收货人',
				dataIndex: 'user_name',
				align: 'center',
			},
			{
				title: '商品数量',
				dataIndex: 'total_num',
				align: 'center',
			},
			{
				title: '商品总价',
				dataIndex: 'total_price',
				align: 'center',
			},
			{
				title: '实付金额',
				dataIndex: 'pay_price',
				align: 'center',
			},
			{
				title: '交易完成时间',
				dataIndex: 'pay_time',
				align: 'center',
			},
		],
		[
			{
				title: ' 来源/用途',
				dataIndex: 'index',
				valueType: 'index',
				align: 'center',
				width: 80,
			},
			{
				title: '积分变化',
				key: 'since2',
				dataIndex: 'createdAt',
				align: 'center',
				valueType: 'date',
			},
			{
				title: '变化前积分',
				dataIndex: 'progress',
				align: 'center',
				valueType: 'progress',
			},
			{
				title: '日期',
				dataIndex: 'progress',
				align: 'center',
				valueType: 'progress',
			},
			{
				title: '备注',
				dataIndex: 'progress',
				align: 'center',
				valueType: 'progress',
			},
		],
		[
			{
				title: '动作',
				dataIndex: 'title',
				align: 'center',
				width: 80,
			},
			{
				title: '获得积分',
				dataIndex: 'number',
				align: 'center',
			},
			{
				title: '签到时间',
				dataIndex: 'created_at',
				align: 'center',
			},
			{
				title: '备注',
				dataIndex: 'remarks',
				align: 'center',
			},
		],
		[

			{
				title: '优惠券名称',
				dataIndex: 'coupon_title',
				align: 'center',
				width: 80,
			},
			{
				title: '面值',
				dataIndex: 'coupon_price',
				align: 'center',
			},
			{
				title: '有效期(天)',
				dataIndex: 'effective_time',
				align: 'center',
			},
			{
				title: '兑换时间',
				dataIndex: 'created_at',
				align: 'center',
			},
		],
		[
			{
				title: '动作',
				dataIndex: 'title',
				align: 'center',
				width: 80,
			},
			{
				title: '变动金额',
				key: 'since2',
				dataIndex: 'createdAt',
				valueType: 'date',
				align: 'center',
			},
			{
				title: '变动后',
				dataIndex: 'progress',
				valueType: 'progress',
				align: 'center',
			},
			{
				title: '创建时间',
				dataIndex: 'progress',
				valueType: 'progress',
				align: 'center',
			},
			{
				title: '备注',
				dataIndex: 'progress',
				valueType: 'progress',
				align: 'center',
			},
		],
		[
			{
				title: 'ID',
				dataIndex: 'id',
				align: 'center',
				width: 80,
			},
			{
				title: '昵称',
				dataIndex: 'real_name',
				align: 'center',
			},
			{
				title: '等级',
				dataIndex: 'level',
				align: 'center',
			},
			{
				title: '加入时间',
				dataIndex: 'created_at',
				align: 'center',
			},
		]];

	return (
		<div>
			<ModalForm
				style={{width: 1000}}
				title="退款处理"
				trigger={
					<a key="link"
					   onClick={async () => {
						   const users = await getOrderUserInfo(UID)
						   setUserInfo(users)
					   }}
					>{nickname}</a>
				}
			>
				<div style={{display: 'flex', justifyContent: 'space-between'}}>
					<Avatar size={64} icon={<UserOutlined/>}/>
					<div style={{width: 666}}>
						<Descriptions title={nickname} column={3} contentStyle={{color: '#666'}}
									  labelStyle={{color: '#666',}}
									  style={{borderBottom: '1px solid #ccc', marginBottom: '10px'}}>
							<Descriptions.Item label="余额">{userInfo.balance}</Descriptions.Item>
							<Descriptions.Item label="总计订单">{userInfo.pay_count}</Descriptions.Item>
							<Descriptions.Item label="总消费金额">{userInfo.total}</Descriptions.Item>
							<Descriptions.Item label="积分">{userInfo.integral}</Descriptions.Item>
							<Descriptions.Item label="本月订单">{userInfo.m_order}</Descriptions.Item>
							<Descriptions.Item label="本月消费金额">{userInfo.m_total}</Descriptions.Item>
						</Descriptions>
					</div>
				</div>
				<div style={{width: 1000}}>
					<ProTable
						actionRef={actionRef}
						columns={columns[key1]}
						rowKey="key"
						pagination={{
							showSizeChanger: true,
						}}
						tableRender={(_, dom) => (
							<div
								style={{
									display: 'flex',
									width: '1000',
								}}
							>
								<Menu
									onSelect={(e) => {
										setKey1(e.key * 1 - 1);
										actionRef.current?.reload()
									}}
									style={{width: 200}}
									defaultSelectedKeys={['1']}
									defaultOpenKeys={['sub1']}
									mode="inline"
								>
									<Menu.SubMenu
										key="sub1"
										title={
											<span>
                  <MailOutlined/>
                  <span>用户记录</span>
                </span>
										}
									>
										<Menu.Item key="1">消费记录</Menu.Item>
										<Menu.Item key="2">积分明细</Menu.Item>
										<Menu.Item key="3">签到记录</Menu.Item>
										<Menu.Item key="4">持有优惠券</Menu.Item>
										<Menu.Item key="5">余额变动</Menu.Item>
										<Menu.Item key="6">好友关系</Menu.Item>
									</Menu.SubMenu>
								</Menu>
								<div style={{flex: 1,}}>
									{dom}
								</div>
							</div>
						)}
						search={false}
						request={async () => {
							let res
							switch ((key1 + 1)) {
								case 1:
									res = await getConsumption(UID);
									break;
								case 3:
									res = await getSignInUser(UID);
									break;
								case 4:
									res = await getCouponUser(UID);
									break;
								case 5:
									res = await getBalanceUser(UID);
									break;
								case 6:
									res = await getUserRelationship(UID);
									break;
								default:
									res = await getConsumption(UID);
									break;
							}

							return {
								data: res.data,
								success: true,
								total: res.meta.pagination.total
							};
						}}

						headerTitle="自定义表格主体"
					/>


				</div>
			</ModalForm>,
		</div>
	);
};

export default UserInfo;








